<template>
    <div class="loginwindow">
        <div class="Login_content">
            <!--<div class="LoginClose" @click="closeWindow"><i class="el-icon-close"></i></div>-->
            <div class="Login_left">
                <div class="Login_left_img"><img src="@a/img/bn5.png" /></div>
                <div class="Login_left_txt">
                    <div class="left_txt_logo"><img src="@a/img/logo.png" /></div>
                </div>
            </div>
          <div class="Login_right" v-if="showBind">
            <div class="Login_right_width" >
              <div class="Login_right_title">手机号绑定微信</div>
              <div class="Login_right_content">
                <div class="right_content_message" >
                  <div class="content_message_list">
                    <input type="tel" v-model="phone" ref="phoneInput" placeholder="手机号" />
                  </div>
                  <div class="content_message_list code">
                    <input type="text" v-model="code" placeholder="手机验证码" />
                    <button @click="sendCode" :disabled="counting">{{ counting ? `${countDown}秒后重试` : '获取验证码' }}</button>
                  </div>
                  <div class="content_message_password" :class="{ 'on': !phone }">
                    <div class="message_password_left">请输入手机号码和验证码</div>
                  </div>
                  <div class="content_message_submit" @click="login_bind" :disabled="!phone || !code">绑定登录</div>
                </div>
              </div>
            </div>
          </div>
          <div class="Login_right" v-if="!showBind">
            <div v-show="f==1" class="Login_right_width" >
              <div class="Login_right_title">登录</div>
              <!-- <div class="Login_right_nav">
                  <div class="right_nav_list" :class="n==1?'active':''" @click="n=1">短信登录</div>
                  <div class="right_nav_list" :class="n==2?'active':''" @click="n=2">密码登录</div>
              </div> -->
              <div class="Login_right_content">
                <div class="right_content_message" v-show="n==1">
                  <div class="content_message_list">
                    <input type="tel" v-model="phone" ref="phoneInput" placeholder="手机号" />
                  </div>
                  <div class="content_message_list code">
                    <input type="text" v-model="code" placeholder="手机验证码" />
                    <button @click="sendCode" :disabled="counting">{{ counting ? `${countDown}秒后重试` : '获取验证码' }}</button>
                  </div>
                  <div class="content_message_password" :class="{ 'on': !phone }">
                    <div class="message_password_left">请输入手机号码和验证码</div>
                  </div>
                  <div class="content_message_submit" @click="login" :disabled="!phone || !code">登录</div>
                </div>
                <div class="right_content_message" v-show="n==2">
                  <div class="content_message_list">
                    <input type="text" v-model="phone2" ref="phoneInput2" placeholder="手机号/邮箱" />
                  </div>
                  <div class="content_message_list code">
                    <input :type='pwdFlag?"password":"text"' size='10' placeholder="密码" />
                    <img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;">
                  </div>
                  <div class="content_message_password" :class="{ 'on': !phone2 }">
                    <div class="message_password_left">请输入手机号码和密码</div>
                    <div class="message_password_right">忘记密码？</div>
                  </div>
                  <div class="content_message_submit" @click="login2">登录</div>
                </div>
                <div class="right_content_bottom">
                  <p>没有账号？<a href="#">立即注册</a></p>
                  <p>登录注册即表示同意<a href="/serviceAgreement.html" target="_blank">用户协议</a></p>
                </div>
                <div class="right_content_WeChat">第三方登录:<div class="content_WeChat_btn" @click="f=2"><img src="@a/img/sv1.svg" /></div></div>
              </div>
            </div>
            <div class="ScanCode" v-show="f==2">
              <div class="Login_right_title">扫码登录</div>
              <div class="ScanCode_title">扫码不可用，请用短信登录</div>
              <div class="ScanCode_img"></div>
              <div class="ScanCode_btn"><span @click="f=1">切换手机号登录</span></div>
              <div class="ScanCode_p">登录注册即表示同意<a href="/serviceAgreement.html" target="_blank">用户协议</a></div>
            </div>
          </div>
      </div>
    </div>
</template>
<script>
import { MessageBox } from 'element-ui';
let interval_login = null;
export default {
  name: "Login",
  data() {
    return {
      n:1,
      f:2,
      pwdFlag:true,//密码标示 true表示当前是密码形式
      textIcon:require("@a/img/sv2.svg"),//展示图标
      pwdIcon:require("@a/img/sv3.svg"),//隐藏图标
      phone: '',
      phone2: '',
      code: '',
      countDown: 60,
      counting: false,
      qrcode: '',
      scene: '',
      union_id: '',
      showBind: false,
    }
  },
  methods: {
    closeWindow(){
      this.$emit('close')
    },
    //改变密码表示
    changePwd:function(){
      //密码标示取反即可
      this.pwdFlag=!this.pwdFlag;
    },
    active (num) {
      this.ins=num
    },
    sendCode() {
      // 判断手机号码是否为空
      if (!this.phone) {
        this.$refs.phoneInput.focus();
        this.$message({
          message: '请输入手机号码!',
          type: 'warning'
        });
        return;
      }

      this.axios.get('/api/common/sendVerifyCode', {params: {
          to : this.phone
        }}).then(res=>{
        // 启动倒计时
        this.counting = true;
        let interval = setInterval(() => {
          if (this.countDown > 0) {
            this.countDown--;
          } else {
            this.counting = false;
            this.countDown = 60;
            clearInterval(interval);
          }
        }, 1000);
      })



    },
    login() {
      let that = this;
      // 判断手机号码和验证码是否为空
      if (!this.phone || !this.code) {
        this.$refs.phoneInput.focus();
        this.$message({
          message: '请输入手机号码和验证码!',
          type: 'warning'
        });
        return;
      }
      let promoter_id = localStorage.getItem('promotion_id')
      this.axios.post(
          '/api/common/login',
          {
            "to": that.phone,
            "verify": that.code,
            'promoter_id' : promoter_id
          }
      ).then(res => {
        if(res.code === 1) {
          localStorage.setItem('token', res.result.token )
          that.$store.commit('setLogin', true)
          that.axios.get('/api/member/getInfo').then(res => {
            localStorage.setItem('memberInfo', JSON.stringify(res.result) )
            that.$store.commit('setMemberInfo', res.result)
          })
          localStorage.removeItem('promotion_id')
          that.closeWindow()
        }

      })

    },
    login2() {
      // 判断手机号码和验证码是否为空2
      if (!this.phone2) {
        this.$refs.phoneInput2.focus();
        this.$message({
          message: '请输入手机号码和验证码!',
          type: 'warning'
        });
        return;
      }

      // 登录
      // ...
    },
    login_bind(){
      let that = this;
      // 判断手机号码和验证码是否为空
      if (!this.phone || !this.code) {
        this.$refs.phoneInput.focus();
        this.$message({
          message: '请输入手机号码和验证码!',
          type: 'warning'
        });
        return;
      }
      let promoter_id = localStorage.getItem('promotion_id')
      this.axios.post(
          '/api/common/login',
          {
            "to": that.phone,
            "verify": that.code,
            "official_openid" : that.union_id,
            'promoter_id' : promoter_id
          }
      ).then(res => {
        if(res.code === 1 ) {
          localStorage.setItem('token', res.result.token )
          that.$store.commit('setLogin', true)
          that.axios.get('/api/member/getInfo').then(res => {
            localStorage.setItem('memberInfo', JSON.stringify(res.result) )
            that.$store.commit('setMemberInfo', res.result)
          })
          localStorage.removeItem('promotion_id')
          that.closeWindow()
        }

      })
    }
  },
  created(){
    let that = this;
    this.axios.get('/api/common/getQrcode').then(res=>{
      that.qrcode = res.result.qrcode_url;
      that.secne = res.result.qrcode_scene;
      interval_login = setInterval(function() {
        that.axios.get('/api/common/isScanner', {
          params: {
            scene: res.result.qrcode_scene
          }
        }).then(res => {
          if (res.code === 1) {
            if (res.result.status == 'login') {
              clearInterval(interval_login)
              localStorage.setItem('token', res.result.token)
              that.$store.commit('setLogin', true)
              that.axios.get('/api/member/getInfo').then(res => {
                localStorage.setItem('memberInfo', JSON.stringify(res.result) )
                that.$store.commit('setMemberInfo', res.result)
              })
              that.closeWindow()
            }
            if (res.result.status == 'bind') {
              clearInterval(interval_login)
              that.showBind = true;
              that.union_id = res.result.official_openid
            }
          }
        })
      }, 1000)
    })
  },
  unmounted(){
    clearInterval(interval_login)
  }

}
</script>
<style>
@import "loginWindow.css";
</style>
